//合规率
passRateEchart();
function passRateEchart() {
  let linePassengerVC1 = document.getElementsByClassName("passRateEchart1");
  for (var i = 0; i < linePassengerVC1.length; i++) {
    let myChart = echarts.init(linePassengerVC1[i]);
    var fourPieData = [
      {
        name: "指标值",
        value: 100,
      },
      {
        name: "指标值",
        value: 100,
      },
      {
        name: "指标值",
        value: 60,
      },
      {
        name: "指标值",
        value: 100,
      },
    ];
    var seriesArr = [];
    fourPieData.forEach(function (item, index) {
      seriesArr.push(
        {
          name: "刻度",
          type: "gauge",
          // center: ["50%", "65%"],
          center: [index * 25 + 13 + "%", "60%"],
          radius: "55%",
          min: 0, //最小刻度
          max: 100, //最大刻度
          splitNumber: 2, //刻度数量
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 1,
              color: [[1, "rgba(0,0,0,0)"]],
            },
          }, //仪表盘轴线
          axisLabel: {
            show: true,
            color: "#0ab7ff",
            fontSize: 10,
            distance: -10,
            formatter: function (v) {
              return v + "%";
            },
          }, //刻度标签。
          axisTick: {
            show: true,
            splitNumber: 5,
            lineStyle: {
              color: "#0ab7ff",
              width: 1,
            },
            length: -3,
          }, //刻度样式
          splitLine: {
            show: true,
            length: -5,
            lineStyle: {
              color: "#0ab7ff",
            },
          }, //分隔线样式
        },
        {
          type: "gauge",
          radius: "50%",
          center: [index * 25 + 13 + "%", "60%"],
          // center: ["50%", "65%"],
          splitNumber: 0, //刻度数量
          startAngle: 180,
          endAngle: 0,
          axisLine: {
            show: true,
            lineStyle: {
              width: 5,
              color: [
                [0.2, "#fa4e4b"],
                [0.4, "#f39c11"],
                [0.6, "#2b64fc"],
                [1, "#00a65a"],
              ],
            },
          },
          //分隔线样式。
          splitLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          pointer: {
            show: true,
            length: "80%",
            width: "5%",
          },
          title: {
            show: true,
            offsetCenter: [0, "60%"], // x, y，单位px
            textStyle: {
              fontWeight: "bold",
              color: "#0ab7ff",
              fontSize: 12,
            },
          },
          //仪表盘详情，用于显示数据。
          detail: {
            show: true,
            offsetCenter: [0, "30%"],
            color: "#ffffff",

            formatter: function (value) {
              if (value <= 20) {
                return;
              } else if (value <= 40) {
                return;
              } else if (value <= 60) {
                return;
              } else {
                return;
              }
            },
            textStyle: {
              fontSize: 12,
            },
          },
          data: [
            {
              name: item.name,
              value: item.value,
            },
          ],
        },
        {
          // 仅显示tooltip用
          type: "pie",
          radius: "90%",
          hoverAnimation: true,
          label: {
            normal: {
              show: false,
              position: "center",
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          z: 3,
          zlevel: 0,
          itemStyle: {
            borderWidth: 0,
          },
          data: [
            {
              value: 50,
              name: "",
              label: {
                normal: {
                  show: false,
                },
              },
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        }
      );
    });
    option = {
      tooltip: {
        position: "inside",
        formatter:
          "小于20%有发展空间<br>20%~40%为健康<br>40%~60%为预警<br>大于60%为过度",
        textStyle: {
          fontSize: 10,
        },
      },
      series: seriesArr,
    };
    myChart.setOption(option);
  }

  let linePassengerVC = document.getElementsByClassName("passRateEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      grid: {
        left: "2%",
        right: "4%",
        bottom: "5%",
        top: "16%",
        containLabel: true,
      },
      legend: {
        gridIndex: 0,
        data: ["施工许可证总数", "实际取证数", "施工工点数"],
        right: 10,
        top: 0,
        textStyle: {
          color: "#fff",
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
      },
      xAxis: {
        gridIndex: 0,
        type: "category",
        data: ["10号线二期", "14号线", "15号线", "18号线一期"],
        axisLine: {
          lineStyle: {
            color: "white",
          },
        },
        axisLabel: {
          // interval: 0,
          // rotate: 40,
          textStyle: {
            fontFamily: "Microsoft YaHei",
          },
        },
      },
      yAxis: {
        gridIndex: 0,
        type: "value",
        max: "100",
        axisLine: {
          show: false,
          lineStyle: {
            color: "white",
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.3)",
          },
        },
        axisLabel: {},
      },
      series: [
        {
          name: "施工许可证总数",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#fccb05",
                },
                {
                  offset: 1,
                  color: "#f5804d",
                },
              ]),
              barBorderRadius: 12,
            },
          },
          data: [9, 72, 67, 46],
        },
        {
          name: "实际取证数",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#8bd46e",
                },
                {
                  offset: 1,
                  color: "#09bcb7",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: [8, 41, 42, 35],
        },
        {
          name: "施工工点数",
          type: "bar",
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#248ff7",
                },
                {
                  offset: 1,
                  color: "#6851f1",
                },
              ]),
              barBorderRadius: 11,
            },
          },
          data: [8, 41, 42, 35],
        },
      ],
    };
    myChart.setOption(option);
  }
}

// 动迁完成率
relocationCompletionEchart();
function relocationCompletionEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "relocationCompletionEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    let name = [
      "10号线二期动迁数",
      "14号线动迁数",
      "15号线动迁数",
      "18号线一期动迁数",
      "动迁数(户/家)总量",
    ];
    let completeValue = [122, 2662, 657, 722, 4163];
    let completePercent = [100, 100, 100, 100, 100];
    option = {
      tooltip: {},
      animationDurationUpdate: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 600,
            edgeLength: 200,
          },
          roam: true,
          label: {
            normal: {
              show: true,
              position: "inside",
              formatter: function (value, indicator) {
                return (
                  value.name +
                  "\n" +
                  "完成量：" +
                  completeValue[name.indexOf(value.name)] +
                  "\n" +
                  "完成率：" +
                  completePercent[name.indexOf(value.name)] +
                  "%"
                );
              },
              fontSize: 12,
              fontStyle: "600",
            },
          },
          data: [
            {
              name: "10号线二期动迁数",
              value: 10000,
              x: 500,
              y: 56,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FF8C00",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FF8C00",
                  color: "#FF8C00",
                },
              },
            },
            {
              name: "18号线一期动迁数",
              value: 6181,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FF4500",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FF4500",
                  color: "#FF4500",
                },
              },
            },
            {
              name: "动迁数(户/家)总量",
              value: 4055,
              symbolSize: 80,
              x: 0,
              y: 0,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#4DFB37",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#4DFB37",
                  color: "#4DFB37",
                },
              },
            },
            {
              name: "14号线动迁数",
              value: 2467,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#00BFFF",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#00BFFF",
                  color: "#00BFFF",
                },
              },
            },
            {
              name: "15号线动迁数",
              value: 2244,
              x: 0,
              y: 0,
              symbolSize: 50,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "#FFD700",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "#FFD700",
                  color: "#FFD700",
                },
              },
            },
          ],
          links: [
            {
              source: "15号线动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "18号线一期动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "10号线二期动迁数",
              target: "动迁数(户/家)总量",
            },
            {
              source: "14号线动迁数",
              target: "动迁数(户/家)总量",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//交地完成率
landDeliveryEchart();
function landDeliveryEchart() {
  let linePassengerVC = document.getElementsByClassName("landDeliveryEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var value = 1;
    var data = [value, value, value];
    var option = {
      title: [
        {
          text: (value * 100).toFixed(0) + "%",
          left: "28%",
          top: "18%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#61033f",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n10号线二期",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
        {
          text: (value * 100).toFixed(0) + "%",
          left: "68%",
          top: "18%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#295008",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n14号线",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
        {
          text: (value * 100).toFixed(0) + "%",
          left: "28%",
          top: "66%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#a06a0a",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n15号线",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
        {
          text: (value * 100).toFixed(0) + "%",
          left: "68%",
          top: "66%",
          textAlign: "center",
          textStyle: {
            fontSize: "30",
            fontWeight: "400",
            color: "#02456d",
            textAlign: "center",
            textBorderColor: "rgba(0, 0, 0, 0)",
            textShadowColor: "#fff",
            textShadowBlur: "0",
            textShadowOffsetX: 0,
            textShadowOffsetY: 1,
          },
          subtext: "\n\n\n\n\n18号线一期",
          subtextStyle: {
            color: "#ffff",
            fontSize: 15,
          },
        },
      ],
      series: [
        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["30%", "22%"],
          amplitude: 5,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(169, 14, 115, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(205, 17, 141, .5)",
              },
              {
                offset: 0,
                color: "rgba(205, 17, 141, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            fontSize: 16,
            formatter: "",
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 0.3,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["30%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },

        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["70%", "22%"],
          amplitude: 20,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(74, 134, 21, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(119, 185, 63, .5)",
              },
              {
                offset: 0,
                color: "rgba(119, 185, 63, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            normal: {
              formatter: "",
            },
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 1,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["70%", "22%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },

        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["30%", "70%"],
          // color: ['#f8eeb0', '#fddc75', '#fbad17'],
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(189, 126, 12, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(251, 173, 23, .5)",
              },
              {
                offset: 0,
                color: "rgba(251, 173, 23, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            normal: {
              formatter: "",
            },
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 1,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["30%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },

        {
          type: "liquidFill",
          radius: "30%",
          z: 6,
          center: ["70%", "70%"],
          amplitude: 5,
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "rgba(0, 108, 154, 1)",
              },
              {
                offset: 0.5,
                color: "rgba(0, 155, 219, .5)",
              },
              {
                offset: 0,
                color: "rgba(0, 155, 219, 0)",
              },
            ],
            globalCoord: false,
          },
          data: [1, { value: 0.5, direction: "left" }, 0.4, 0.3],
          backgroundStyle: {
            borderWidth: 1,
            color: "transparent",
          },
          label: {
            normal: {
              formatter: "",
            },
          },
          outline: {
            show: true,
            itemStyle: {
              borderWidth: 0,
            },
            borderDistance: 0,
          },
        },
        {
          name: "5",
          type: "pie",
          z: 5,
          radius: ["30%", "0%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: "#e7e8ea",
                  shadowBlur: 15,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 20,
                },
              },
            },
          ],
        },
        {
          name: "3",
          type: "pie",
          z: 3,
          radius: ["0%", "34%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 0.3,
                      color: "#e7e8ea",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "2",
          type: "pie",
          z: 2,
          radius: ["0%", "31.5%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fefefe",
                    },
                    {
                      offset: 1,
                      color: "#e7e8ea",
                    },
                  ]),
                  shadowBlur: 10,
                  shadowColor: "#8c95a6",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "1",
          type: "pie",
          z: 1,
          radius: ["0%", "40%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#f3f3f5",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
        {
          name: "0",
          type: "pie",
          z: 0,
          radius: ["0%", "40.5%"],
          center: ["70%", "70%"],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
            },
          },
          data: [
            {
              value: 100,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "#fff",
                    },
                    {
                      offset: 1,
                      color: "#e0e1e5",
                    },
                  ]),
                  shadowBlur: 3,
                  shadowColor: "rgba(140, 149, 166, .6)",
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                },
              },
            },
            {
              value: 0,
              itemStyle: {
                normal: {
                  color: "transparent",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//质量问题整改闭合率
qualityProblemEchart();
function qualityProblemEchart() {
  let linePassengerVC = document.getElementsByClassName("qualityProblemEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          label: {
            show: true,
          },
        },
      },
      grid: {
        left: "10%",
        top: "28%",
        right: "15%",
        bottom: "18%",
      },
      legend: {
        data: ["年度质量问题数", "年度整改闭合数", "指标值"],
        top: "4%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      xAxis: {
        data: ["10号线二期", "14号线", "15号线", "18号线"],
        axisLine: {
          show: true, //隐藏X轴轴线
          lineStyle: {
            color: "#3d5269",
            width: 1,
          },
        },
        axisTick: {
          show: true, //隐藏X轴刻度
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff", //X轴文字颜色
            fontSize: 12,
          },
          interval: 0,
          rotate: 30,
        },
      },
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
        {
          type: "value",
          name: "指标值%",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12,
          },
          position: "right",
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255,255,255,0.3)",
            },
          },
          axisLabel: {
            show: true,
            formatter: "{value} %", //右侧Y轴文字显示
            textStyle: {
              color: "#fff",
              fontSize: 12,
            },
          },
        },
      ],
      series: [
        {
          name: "年度质量问题数",
          type: "bar",
          barWidth: 18,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#00FFFF",
                },
                {
                  offset: 1,
                  color: "#0080FF",
                },
              ]),
            },
          },
          data: [29, 47, 53, 57],
        },
        {
          name: "年度整改闭合数",
          type: "bar",
          barWidth: 18,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#E29052",
                },
                {
                  offset: 1,
                  color: "#FA5A53",
                },
              ]),
            },
          },
          data: [29, 47, 53, 57],
        },
        {
          name: "指标值",
          type: "line",
          yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
          showAllSymbol: true, //显示所有图形。
          symbol: "circle", //标记的图形为实心圆
          symbolSize: 6, //标记的大小
          itemStyle: {
            //折线拐点标志的样式
            color: "#26D9FF",
            borderColor: "#26D9FF",
            width: 2,
            shadowColor: "#26D9FF",
            shadowBlur: 2,
          },
          lineStyle: {
            color: "#26D9FF",
            width: 2,
            shadowBlur: 2,
          },
          data: [100, 100, 100, 100],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//信用评价历史对比
creditEvaluationEchart();
function creditEvaluationEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "creditEvaluationEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {},
      title: {
        show: true,
        text: "2018年各单位信用评价得分",
        top: "1%",
        right: "1%",
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
      animationDurationUpdate: function (idx) {
        // 越往后的数据延迟越大
        return idx * 100;
      },
      animationEasingUpdate: "bounceIn",
      color: ["#fff", "#fff", "#fff"],
      series: [
        {
          type: "graph",
          layout: "force",
          force: {
            repulsion: 150,
            edgeLength: 10,
          },
          roam: true,
          label: {
            normal: {
              show: true,
              formatter: "{b}\n" + "{c}",
            },
          },
          data: [
            {
              name: "中交",
              value: 10000,
              symbolSize: 80,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(27, 94, 93)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(27, 94, 93)",
                  color: "rgb(27, 94, 93)",
                },
              },
            },
            {
              name: "腾达",
              value: 6181,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(206, 188, 11)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(206, 188, 11)",
                  color: "rgb(206, 188, 11)",
                },
              },
            },
            {
              name: "宏润",
              value: 4386,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(165, 190, 198)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(165, 190, 198)",
                  color: "rgb(165, 190, 198)",
                },
              },
            },
            {
              name: "建工",
              value: 4055,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(98, 41, 72)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(98, 41, 72)",
                  color: "rgb(98, 41, 72)",
                },
              },
            },
            {
              name: "隧道",
              value: 2467,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(175, 20, 143)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(175, 20, 143)",
                  color: "rgb(175, 20, 143)",
                },
              },
            },
            {
              name: "中铁建",
              value: 2244,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(77, 231, 55)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(77, 231, 55)",
                  color: "rgb(77, 231, 55)",
                },
              },
            },
            {
              name: "中铁工",
              value: 1898,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(26, 83, 246)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(26, 83, 246)",
                  color: "rgb(26, 83, 246)",
                },
              },
            },
            {
              name: "中建八局",
              value: 1484,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(155, 118, 127)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(155, 118, 127)",
                  color: "rgb(155, 118, 127)",
                },
              },
            },
            {
              name: "浦东建设",
              value: 1112,
              symbolSize: 70,
              draggable: true,
              itemStyle: {
                normal: {
                  borderColor: "rgb(116, 207, 18)",
                  borderWidth: 4,
                  shadowBlur: 100,
                  shadowColor: "rgb(116, 207, 18)",
                  color: "rgb(116, 207, 18)",
                },
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//验收合格率
acceptanceRateEchart();
function acceptanceRateEchart() {
  let linePassengerVC = document.getElementsByClassName("acceptanceRateEchart");
  var abscissaData = ["土建工程项目", "装饰安装工程项目", "机电系统工程项目"];
  var value = [100, 100, 100];
  var residueValue = [];

  var ellipseList = [];

  value.forEach((item, index) => {
    var xDeviation = 107 * index;
    residueValue.push(100 - item);
    ellipseList.push(
      {
        name: "中间立体圆",
        type: "pictorialBar",
        symbolSize: [25, 10],
        symbolOffset: [xDeviation, -5],
        z: 12,
        itemStyle: {
          normal: {
            color: "#2B5B4D",
          },
        },
        data: [
          {
            value: item,
            symbolPosition: "end",
          },
        ],
      },
      {
        name: "最底部立体圆",
        type: "pictorialBar",
        symbolSize: [25, 10],
        symbolOffset: [xDeviation, 5],
        z: 12,
        itemStyle: {
          normal: {
            color: "#01CC04",
          },
        },
        data: [100 - item],
      }
    );
  });

  ellipseList.push({
    //底部立体柱
    stack: "1",
    type: "bar",
    itemStyle: {
      normal: {
        color: "#01CC04",
        opacity: 0.7,
      },
    },
    // label: {
    //     show: true,
    //     position: "top",
    //     distance: 15,
    //     color: "#FFFE00",
    //     fontSize:10,
    //     formatter:'{c}'+'%',
    //     rotate: 45
    // },
    silent: true,
    barWidth: 25,
    barGap: "-100%", // Make series be overlap
    data: value,
  });
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    option = {
      tooltip: {
        trigger: "none",
      },
      grid: {
        top: "10%",
        left: "12%",
      },
      xAxis: {
        show: true,
        data: abscissaData,
        axisTick: {
          show: true,
        },
        axisLine: {
          show: true,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: "#FFFFFF",
          },
          interval: 0,
          // rotate: 45,
          margin: 20,
          align: "center",
        },
      },
      yAxis: {
        show: true,
        max: 100,
        axisLabel: {
          textStyle: {
            color: "#FFFFFF",
          },
          formatter: "{value}%",
        },
      },
      series: ellipseList,
    };
    myChart.setOption(option);
  }
}
//市民满意率
publicSatisfactionEchart();
function publicSatisfactionEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "publicSatisfactionEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var img =
      "";
    var trafficWay = [
      {
        name: "10号线二期",
        value: 90,
      },
      {
        name: "14号线",
        value: 86.67,
      },
      {
        name: "15号线",
        value: 83.87,
      },
      {
        name: "18号线",
        value: 85.71,
      },
    ];

    var data = [];
    var color = [
      "#00ffff",
      "#00cfff",
      "#006ced",
      "#ffe000",
      "#ffa800",
      "#ff5b00",
      "#ff3000",
    ];
    for (var i = 0; i < trafficWay.length; i++) {
      data.push(
        {
          value: trafficWay[i].value,
          name: trafficWay[i].name,
          itemStyle: {
            normal: {
              borderWidth: 5,
              shadowBlur: 20,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
        },
        {
          value: 2,
          name: "",
          itemStyle: {
            normal: {
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          },
        }
      );
    }
    var seriesOption = [
      {
        name: "",
        type: "pie",
        clockWise: false,
        radius: ["50%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          normal: {
            label: {
              show: true,
              position: "outside",
              color: "#ddd",
              formatter: function (params) {
                var percent = 0;
                var total = 0;
                for (var i = 0; i < trafficWay.length; i++) {
                  total += trafficWay[i].value;
                }
                percent = params.value.toFixed(0);
                if (params.name !== "") {
                  return params.name + "：" + percent + "%";
                } else {
                  return "";
                }
              },
            },
            labelLine: {
              length: 30,
              length2: 20,
              show: true,
              color: "#00ffff",
            },
          },
        },
        data: data,
      },
    ];
    option = {
      color: color,
      title: {
        text: "市民满意率",
        top: "45%",
        textAlign: "center",
        left: "49%",
        textStyle: {
          color: "#fff",
          fontSize: 22,
          fontWeight: "400",
        },
      },
      graphic: {
        elements: [
          {
            type: "image",
            z: 3,
            style: {
              image: img,
              width: 128,
              height: 128,
            },
            left: "center",
            top: "center",
            position: [100, 100],
          },
        ],
      },
      tooltip: {
        show: false,
      },
      legend: {
        icon: "circle",
        orient: "horizontal",
        // x: 'left',
        data: ["10号线二期", "14号线", "15号线", "18号线"],
        top: "5%",
        align: "right",
        textStyle: {
          color: "#fff",
        },
        itemGap: 20,
      },
      toolbox: {
        show: false,
      },
      series: seriesOption,
    };
    myChart.setOption(option);
  }
}
//安全检查完成率
securityCheckEchart();
function securityCheckEchart() {
  let linePassengerVC = document.getElementsByClassName("securityCheckEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var xData = ["10号线二期", "14号线", "15号线", "18号线"],
      yData1 = [57, 57, 57, 58],
      yData2 = [29, 29, 29, 29],
      yData3 = [47, 58, 56, 56],
      yData4 = [80, 85, 82, 80],
      borderData = [],
      legend = ["年度数量", "计划完成量", "实际完成量", "完成率"],
      colorArr = [
        {
          start: "rgba(155, 101, 229,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          start: "rgba(71, 173, 245,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          start: "rgba(82, 249, 107,",
          end: "rgba(18, 58, 86,0.5)",
        },
        {
          color: "#00EAFF",
        },
      ];
    var normalColor = "#fff";
    let seriesData = [];
    var borderHeight = 4;
    xData.forEach((element) => {
      borderData.push(borderHeight);
    });
    [yData1, yData2, yData3, yData4].forEach((item, index) => {
      var obj1 = {};
      var obj2 = {};
      if (index < 3) {
        obj1 = {
          name: legend[index],
          type: "bar",
          stack: legend[index],
          data: item,
          barWidth: "15%",
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: colorArr[index].start + "0.7)",
                  },
                  {
                    offset: 0.5,
                    color: colorArr[index].start + "0.3)",
                  },
                  {
                    offset: 1,
                    color: colorArr[index].end,
                  },
                ],
                globalCoord: false,
              },
            },
          },
        };
        obj2 = {
          name: "",
          type: "bar",
          stack: legend[index],
          itemStyle: {
            normal: {
              color: colorArr[index].start + "1)",
            },
          },
          data: borderData,
        };
        seriesData.push(obj1);
        seriesData.push(obj2);
      } else {
        var obj3 = {
          name: legend[index],
          type: "line",
          yAxisIndex: 1,
          smooth: false,
          symbol: "circle",
          symbolSize: 10,
          lineStyle: {
            normal: {
              width: 2,
            },
          },
          itemStyle: {
            normal: {
              color: colorArr[index].color,
              borderColor: "#fff",
              borderWidth: 1,
            },
          },
          data: item,
          label: {
            normal: {
              show: false,
            },
          },
        };
        seriesData.push(obj3);
      }
    });
    console.log(seriesData);
    option = {
      grid: {
        left: "3%",
        top: "20%",
        right: "3%",
        bottom: "5%",
        containLabel: true,
      },
      legend: {
        show: true,
        icon: "rect",
        itemWidth: 20,
        itemHeight: 3,
        right: "5%",
        top: "3%",
        textStyle: {
          color: "#fff",
        },
        data: legend,
      },
      tooltip: {
        trigger: "axis",
        formatter: function (params) {
          var str = "";
          for (var i = 0; i < params.length; i++) {
            if (params[i].seriesName !== "") {
              str +=
                params[i].name +
                ":" +
                params[i].seriesName +
                params[i].value +
                "<br/>";
            }
          }
          return str;
        },
      },
      xAxis: [
        {
          type: "category",
          data: xData,
          axisPointer: {
            type: "shadow",
          },
          axisLabel: {
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: normalColor,
            fontSize: 12,
          },
          // "min": 0,
          // "max": 50,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: "dashed",
              color: normalColor,
            },
          },
        },
        {
          type: "value",
          name: "%",
          nameTextStyle: {
            color: normalColor,
            fontSize: 12,
          },
          min: -100,
          max: 100,
          axisLabel: {
            formatter: "{value}",
            textStyle: {
              color: normalColor,
              fontSize: 12,
            },
          },
          axisLine: {
            lineStyle: {
              color: normalColor,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              type: "dashed",
              color: "rgba(255,255,255,0.2)",
            },
          },
        },
      ],
      series: seriesData,
    };
    myChart.setOption(option);
  }
}
// 安全隐患整改闭合率;
hiddenDangerEchart();
function hiddenDangerEchart() {
  let linePassengerVC = document.getElementsByClassName("hiddenDangerEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var data = [
        {
          name: "10号线二期",
          value: 98,
        },
        {
          name: "14号线",
          value: 123,
        },
        {
          name: "15号线",
          value: 127,
        },
        {
          name: "18号线",
          value: 115,
        },
      ],
      legend = [
        {
          name: "10号线二期",
          backgroundColor: "#fff",
        },
        "14号线",
        "15号线",
        "18号线",
      ];
    arrName = getArrayValue(data, "name");
    arrValue = getArrayValue(data, "value");
    sumValue = 150;
    var bgLineColor = "rgba(255,255,255,0.3)";
    objData = array2obj(data, "name");
    optionData = getData(data);
    company = "个";
    function getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [
          {
            name: "大环",
            type: "gauge",
            splitNumber: 15,
            radius: "85%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[1, bgLineColor]],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                color: "auto",
                width: 1.5,
              },
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
          {
            name: "小环",
            type: "gauge",
            splitNumber: 15,
            radius: "80%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: bgLineColor,
                width: 1,
              },
              length: 5,
              splitNumber: 2,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: "学历",
          type: "pie",
          clockWise: false,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0050E2",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                  global: false,
                },
              },
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "背景线",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 69 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 10,
          },
          data: [
            {
              value: 100,
              itemStyle: {
                color: "rgba(255,255,255,0.3)",
                borderWidth: 10,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    }

    option = {
      title: {
        text: "安全隐患数",
        left: "40%",
        top: "50%",
        textAlign: "center",
        textStyle: {
          fontWeight: "normal",
          fontSize: "16",
          color: "#fff",
          textAlign: "center",
        },
      },
      grid: {
        top: "16%",
        bottom: "54%",
        left: "50%",
        containLabel: false,
      },
      legend: {
        icon: "circle",
        orient: "vertical",
        right: "0",
        top: "0",
        itemGap: 2,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          color: "#fff",
        },
        formatter: function (params) {
          return params + objData[params].value + company;
        },
        data: legend,
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          z: 3,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: "RGB(78,184,252)",
              fontSize: 25,
            },
            show: false,
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    };
    myChart.setOption(option);
  }
  let hiddenDangerEt = document.getElementsByClassName("hiddenDangerEchartt");
  for (var i = 0; i < hiddenDangerEt.length; i++) {
    let myChart = echarts.init(hiddenDangerEt[i]);
    var data = [
        {
          name: "10号线二期",
          value: 98,
        },
        {
          name: "14号线",
          value: 123,
        },
        {
          name: "15号线",
          value: 127,
        },
        {
          name: "18号线",
          value: 115,
        },
      ],
      legend = [
        {
          name: "10号线二期",
          backgroundColor: "#fff",
        },
        "14号线",
        "15号线",
        "18号线",
      ];
    arrName = getArrayValue(data, "name");
    arrValue = getArrayValue(data, "value");
    sumValue = 150;
    var bgLineColor = "rgba(255,255,255,0.3)";
    objData = array2obj(data, "name");
    optionData = getData(data);
    company = "个";
    function getArrayValue(array, key) {
      var key = key || "value";
      var res = [];
      if (array) {
        array.forEach(function (t) {
          res.push(t[key]);
        });
      }
      return res;
    }

    function array2obj(array, key) {
      var resObj = {};
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i];
      }
      return resObj;
    }

    function getData(data) {
      var res = {
        series: [
          {
            name: "大环",
            type: "gauge",
            splitNumber: 15,
            radius: "85%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[1, bgLineColor]],
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: true,
              length: 12,
              lineStyle: {
                color: "auto",
                width: 1.5,
              },
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
          {
            name: "小环",
            type: "gauge",
            splitNumber: 15,
            radius: "80%",
            center: ["40%", "55%"],
            startAngle: 90,
            endAngle: -269.9999,
            axisLine: {
              show: false,
            },
            axisTick: {
              show: true,
              lineStyle: {
                color: bgLineColor,
                width: 1,
              },
              length: 5,
              splitNumber: 2,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            detail: {
              show: false,
            },
          },
        ],
        yAxis: [],
      };
      for (let i = 0; i < data.length; i++) {
        res.series.push({
          name: "学历",
          type: "pie",
          clockWise: false,
          z: 2,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 68 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
          data: [
            {
              value: data[i].value,
              name: data[i].name,
              itemStyle: {
                color: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#0050E2",
                    },
                    {
                      offset: 1,
                      color: "#fff",
                    },
                  ],
                  global: false,
                },
              },
            },
            {
              value: sumValue - data[i].value,
              name: "",
              itemStyle: {
                color: "rgba(0,0,0,0)",
                borderWidth: 0,
              },
              tooltip: {
                show: false,
              },
              label: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.series.push({
          name: "背景线",
          type: "pie",
          silent: true,
          z: 1,
          clockWise: false,
          hoverAnimation: false,
          radius: [73 - i * 15 + "%", 69 - i * 15 + "%"],
          center: ["40%", "55%"],
          label: {
            show: false,
          },
          itemStyle: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            borderWidth: 10,
          },
          data: [
            {
              value: 100,
              itemStyle: {
                color: "rgba(255,255,255,0.3)",
                borderWidth: 10,
              },
              tooltip: {
                show: false,
              },
              hoverAnimation: false,
            },
          ],
        });
        res.yAxis.push(data[i].name);
      }
      return res;
    }

    option = {
      title: {
        text: "整改闭合数",
        left: "40%",
        top: "50%",
        textAlign: "center",
        textStyle: {
          fontWeight: "normal",
          fontSize: "16",
          color: "#fff",
          textAlign: "center",
        },
      },
      grid: {
        top: "16%",
        bottom: "54%",
        left: "50%",
        containLabel: false,
      },
      legend: {
        icon: "circle",
        orient: "vertical",
        right: "0",
        top: "0",
        itemGap: 2,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          color: "#fff",
        },
        formatter: function (params) {
          return params + objData[params].value + company;
        },
        data: legend,
      },
      yAxis: [
        {
          type: "category",
          inverse: true,
          z: 3,
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            inside: false,
            textStyle: {
              color: "RGB(78,184,252)",
              fontSize: 25,
            },
            show: false,
          },
          data: optionData.yAxis,
        },
      ],
      xAxis: [
        {
          show: false,
        },
      ],
      series: optionData.series,
    };
    myChart.setOption(option);
  }
  let hiddenDangercloseC = document.getElementsByClassName(
    "hiddenDangercloseEchart"
  );
  for (var i = 0; i < hiddenDangercloseC.length; i++) {
    let myChart = echarts.init(hiddenDangercloseC[i]);
    var value = 100;
    option = {
      title: {
        text: `${value}%`,
        subtext: "安全隐患整改闭合率",
        left: "center",
        top: "center", //top待调整
        textStyle: {
          color: "#fff",
          fontSize: 20,
          fontFamily: "DINAlternate-Bold",
        },
        subtextStyle: {
          color: "#ff",
          fontSize: 12,
          fontFamily: "PingFangSC-Regular",
          top: "center",
        },
        itemGap: -4, //主副标题间距
      },
      xAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        // data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: [
        // 内圆
        {
          type: "pie",
          radius: ["0", "48%"],
          center: ["50%", "50%"],
          z: 0,
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#1147A1",
                },
                {
                  offset: 0.5,
                  color: "#423DB3",
                },
                {
                  offset: 1,
                  color: "#1147A1",
                },
              ]),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          label: {
            normal: {
              position: "center",
            },
          },
          data: [100],
        },
        // 进度圈
        {
          type: "pie",
          clockWise: true,
          radius: ["60%", "59%"],
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          data: [
            {
              value: value,
              itemStyle: {
                normal: {
                  borderWidth: 10,
                  borderColor: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#7940FE" || "#00cefc", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#2A69EC" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: "#7940FE" || "#00cefc", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#2A69EC" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  label: {
                    show: false,
                    position: "inner",
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
            {
              name: "gap",
              value: 100 - value,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            },
          ],
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "85%",
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            },
          },
          splitLine: {
            length: 12, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            }, //刻度节点线
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 0,
              name: "",
            },
          ],
        },
        // 刻度圈
        {
          type: "pie",
          radius: ["0%", "70%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
              textStyle: {
                fontWeight: "bold",
              },
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.05,
                    color: "rgba(32,36,107, 0.2)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(32,36,107,0.3)",
                  },
                  {
                    offset: 0.95,
                    color: "rgba(32,36,107, 0.2)",
                  },
                ],
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
            labelLine: {
              show: false,
            },
          },
          data: [
            {
              value: 3235,
            },
          ],
        },
        //最外层圈
        {
          type: "pie",
          radius: ["0%", "80%"],
          center: ["50%", "50%"],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          label: {
            normal: {
              show: false,
              position: "center",
            },
            emphasis: {
              show: false,
              textStyle: {
                fontWeight: "bold",
              },
            },
          },
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0.05,
                    color: "rgba(21,24,65, 0.2)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(21,24,65, 0.3)",
                  },
                  {
                    offset: 0.95,
                    color: "rgba(21,24,65, 0.2)",
                  },
                ],
              },
            },
          },
          labelLine: {
            normal: {
              show: false,
            },
          },
          data: [
            {
              value: 3235,
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
// 用款/概算比率
budgetEstimateEchart();
function budgetEstimateEchart() {
  let linePassengerVC = document.getElementsByClassName("budgetEstimateEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var labeStyle = {
      position: "right", //标签数据显示的位置
      show: true,
      formatter: "{c}", //加单位
      color: "#fff",
    };
    var option = {
      legend: {
        top: "3%",
        icon: "roundRect", //  这个字段控制形状  类型包括 circle，rect ，roundRect，triangle，diamond，pin，arrow，nonei
        // data:['检查','维修','更换','未处理'],
        data: [
          {
            name: "10号线二期",
            icon:
              "image://",
          },
          {
            name: "14号线",
            icon:
              "image://",
          },
          {
            name: "15号线",
            icon:
              "image://",
          },
          {
            name: "18号线",
            icon:
              "image://",
          },
        ],
        itemGap: 10,
        itemWidth: 20,
        itemHeight: 10,
        textStyle: {
          color: "#fff",
          padding: [3, 0, 0, 0],
        },
      },
      grid: [
        {
          //左侧的柱状图grid
          width: "100%",
          left: "5%",
          top: "15%",
          right: "0",
          bottom: "0",
        },
      ],
      xAxis: [
        {
          //左侧柱状图的X轴
          gridIndex: 0, //x 轴所在的 grid 的索引
          show: false,
        },
      ],
      yAxis: [
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          axisLabel: {
            verticalAlign: "bottom",
            align: "left",
            padding: [0, 0, 15, 10],
            textStyle: {
              color: "#FFFFFF",
              fontSize: "12",
            },
          },
          data: ["10号线二期", "14号线", "15号线", "18号线"],
          inverse: true,
        },
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          axisLabel: {
            verticalAlign: "bottom",
            align: "right",
            padding: [0, 310, 15, 0],
            textStyle: {
              color: "#FFFFFF",
              fontSize: "12",
            },
          },
          data: ["77.10%", "77.10%", "77.10%", "77.10%"],
          inverse: true,
        },
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          data: [72.61, 504.42, 421.36, 388.81],
          inverse: true,
          axisLabel: {
            show: true,
            verticalAlign: "bottom",
            align: "center",
            padding: [0, 200, 15, 0],
            textStyle: {
              color: "#fff",
              fontSize: "12",
            },
            formatter: function (value) {
              return value + "亿元";
            },
            rich: {
              y: {
                color: "#befbff",
                fontSize: 12,
              },
              x: {
                color: "#f6cf42",
                fontSize: 16,
              },
            },
          },
        },
        {
          //左侧柱状图的Y轴
          gridIndex: 0, //y轴所在的 grid 的索引
          splitLine: "none",
          axisTick: "none",
          axisLine: "none",
          data: [],
        },
      ],
      series: [
        {
          name: "10号线二期",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [55.981, , ,],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(68, 180, 255, 0.2)", "rgba(68, 180, 255, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "14号线",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [, 312.247, ,],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(22, 231, 56, 0.2)", "rgba(22, 231, 56, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "15号线",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [, , 239.83],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(253, 191, 25, 0.2)", "rgba(253, 191, 25, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "18号线",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          data: [, , , 233.8],
          barWidth: 15,
          label: labeStyle,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                ["rgba(255, 57, 57, 0.2)", "rgba(255, 57, 57, 1)"].map(
                  (color, offset) => ({
                    color,
                    offset,
                  })
                )
              ),
            },
          },
          z: 2,
        },
        {
          name: "外框",
          type: "bar",
          xAxisIndex: 0, //使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。
          yAxisIndex: 0, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
          barGap: "-100%",
          data: [1554, 1554, 1554, 1554],
          barWidth: 15,
          itemStyle: {
            normal: {
              color: "rgba(255, 255, 255, 0.15)",
              barBorderRadius: 6,
            },
          },
          z: 0,
        },
        {
          name: "10号线二期",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          data: [
            {
              value: 55.981,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "14号线",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          z: 12,
          data: [
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 312.247,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "15号线",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          data: [
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 239.83,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
          ],
        },
        {
          name: "18号线",
          type: "pictorialBar",
          symbol:
            "image://",
          symbolSize: [50, 50],
          symbolOffset: [20, 0],
          z: 12,
          itemStyle: {
            normal: {
              color: "#fff",
            },
          },
          data: [
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 0,
              symbolPosition: "end",
            },
            {
              value: 233.8,
              symbolPosition: "end",
            },
          ],
        },
      ],
    };
    myChart.setOption(option);
  }
}
//文明工地达标率
civilizedConstructionSiteEchart();
function civilizedConstructionSiteEchart() {
  let linePassengerVC = document.getElementsByClassName(
    "civilizedConstructionSiteEchart"
  );
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var fourPieData = [
      {
        title: "文明工地达标率",
        value: 100,
      },
      {
        title: "市级升级版\n文明工地达标率",
        value: 100,
      },
    ];
    var titleArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: `${item.title}\n${item.value}%`,
        left: index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
        top: "45%",
        textAlign: "center",
        textStyle: {
          fontSize: 12,
          color: "#ffffff",
        },
      });
      seriesArr.push(
        {
          type: "gauge",
          radius: "40%",
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          clockwise: false,
          startAngle: "-80",
          endAngle: "-439.9999",
          splitNumber: 25,
          detail: {
            offsetCenter: [0, -20],
            formatter: " ",
          },
          pointer: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: [
                [0, "#2CFAFC"],
                [50 / 100, "#00FFFF"],
                [1, "#0E192D"],
              ],
              width: 10,
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "#0E192D",
              width: 6,
            },
          },
          axisLabel: {
            show: false,
          },
        },
        {
          name: "最内层虚线圈",
          type: "pie",
          radius: ["24%", "25%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "red",
            },
          },
          label: {
            show: false,
          },
          data: setdata(),
        },
        {
          type: "pie",
          name: "内层细圆环",
          radius: ["31%", "31.5%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#00FFFF",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          type: "pie",
          name: "外层细圆环",
          radius: ["41%", "42%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          hoverAnimation: false,
          clockWise: false,
          itemStyle: {
            normal: {
              color: "#00FFFF",
            },
          },
          label: {
            show: false,
          },
          data: [100],
        },
        {
          name: "大环",
          type: "gauge",
          splitNumber: 35,
          radius: "52%",
          center: ["50%", "50%"],
          center: [
            index < 2 ? index * 50 + 25 + "%" : index * 50 - 75 + "%",
            index < 2 ? "50%" : "50%",
          ],
          startAngle: 90,
          endAngle: -269.9999,
          axisLine: {
            show: false,
            lineStyle: {
              color: [[1, "#00FFFF"]],
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            length: 10,
            lineStyle: {
              color: "auto",
              width: 1.5,
            },
          },
          axisLabel: {
            show: false,
          },
          detail: {
            show: false,
          },
        }
      );
    });

    let value = 100;
    let title = "市级升级版\n文明工地达标率";
    function setdata() {
      let dataArr = [];
      for (var i = 0; i < 100; i++) {
        if (i % 2 === 0) {
          dataArr.push({
            name: (i + 1).toString(),
            value: 10,
            itemStyle: {
              normal: {
                color: "rgb(0,255,255,.3)",
              },
            },
          });
        } else {
          dataArr.push({
            name: (i + 1).toString(),
            value: 100,
            itemStyle: {
              normal: {
                color: "rgb(0,0,0,0)",
                borderWidth: 0,
                borderColor: "rgba(0,255,255,1)",
              },
            },
          });
        }
      }
      return dataArr;
    }
    // function startTimer() {
    //   timer = setInterval(() => {
    //     let option = myChart.getOption();
    //     option.series[1].startAngle = option.series[1].startAngle - 1;
    //     myChart.setOption(option);
    //   }, 100);
    // }
    // setTimeout(startTimer, 0);
    option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
}
// 新线故障修复率;
newLineFaultEchart();
function newLineFaultEchart() {
  let linePassengerVC = document.getElementsByClassName("newLineFaultEchart");
  for (var i = 0; i < linePassengerVC.length; i++) {
    let myChart = echarts.init(linePassengerVC[i]);
    var fourPieData = [
      {
        name: "故障报修数",
        value: 20,
      },
      {
        name: "接修数总量",
        value: 20,
      },
      {
        name: "修复数总量",
        value: 8,
      },
    ];
    var titleArr = [],
      seriesArr = [];
    fourPieData.forEach(function (item, index) {
      titleArr.push({
        text: `${item.value}`,
        subtext: item.name,
        left: index * 30 + 19 + "%",
        top: "35%",
        textAlign: "center",
        textStyle: {
          color: "#fff",
          fontSize: 14,
          fontFamily: "DINAlternate-Bold",
        },
        subtextStyle: {
          color: "#ff",
          fontSize: 12,
          fontFamily: "PingFangSC-Regular",
          top: "center",
        },
        itemGap: 4, //主副标题间距
      });
      seriesArr.push(
        // 内圆
        {
          type: "pie",
          radius: ["0", "40%"],
          center: [index * 30 + 20 + "%", "50%"],
          hoverAnimation: false,
          z: 0,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#FFC600",
                },
                {
                  offset: 0.5,
                  color: "#30D27C",
                },
                {
                  offset: 1,
                  color: "#0B95FF",
                },
              ]),
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
          label: {
            normal: {
              position: "center",
            },
          },
          data: [100],
        },
        // 进度圈
        {
          type: "pie",
          clockWise: true,
          radius: ["50%", "55%"],
          center: [index * 30 + 20 + "%", "50%"],
          hoverAnimation: false,
          label: {
            normal: {
              position: "inner",
              show: false,
            },
          },
          data: [
            {
              value: item.value,
              itemStyle: {
                normal: {
                  borderWidth: 2,
                  borderColor: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFC600" || "#30D27C", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0B95FF" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  color: {
                    // 完成的圆环的颜色
                    colorStops: [
                      {
                        offset: 0,
                        color: "#FFC600" || "#30D27C", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "#0B95FF" || "#367bec", // 100% 处的颜色
                      },
                    ],
                  },
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                },
              },
            },
            {
              name: "gap",
              value: item.value,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            },
          ],
        },
        //刻度尺
        {
          // name: "白色圈刻度",
          type: "gauge",
          radius: "80%",
          center: [index * 30 + 20 + "%", "50%"],
          startAngle: 225, //刻度起始
          endAngle: -134.8, //刻度结束
          z: 4,
          axisTick: {
            show: true,
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            },
          },
          splitLine: {
            length: 12, //刻度节点线长度
            lineStyle: {
              width: 2,
              color: "rgba(1,244,255, 0.9)",
            }, //刻度节点线
          },
          axisLabel: {
            color: "rgba(255,255,255,0)",
            fontSize: 12,
          }, //刻度节点文字颜色
          pointer: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              opacity: 0,
            },
          },
          detail: {
            show: false,
          },
          data: [
            {
              value: 20,
              name: "",
            },
          ],
        }
      );
    });
    option = {
      title: titleArr,
      xAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
      },
      series: seriesArr,
    };

    option = {
      title: titleArr,
      series: seriesArr,
    };
    myChart.setOption(option);
  }
  let linePassengerVC1 = document.getElementsByClassName("newLineFaultEchart1");
  for (var i = 0; i < linePassengerVC1.length; i++) {
    let myChart = echarts.init(linePassengerVC1[i]);

    //非本人所创,借鉴各位前辈项目改善完成,仅供参考
    var highlight = "#03b7c9";

    var demoData = [
      {
        name: "接修率",
        value: 100,
        unit: "%",
        pos: ["25%", "50%"],
        range: [0, 100],
        YS: [
          [0.3, "#f3390d"],
          [0.7, "#119eff"],
          [1, "#30da74"],
        ],
      },
      {
        name: "修复率",
        value: 40,
        unit: "%",
        pos: ["75%", "50%"],
        range: [0, 100],
        splitNum: 10,
        YS: [
          [0.3, "#f3390d"],
          [0.7, "#119eff"],
          [1, "#30da74"],
        ],
      },
    ];

    option = {
      series: (function () {
        var result = [];
        demoData.forEach(function (item) {
          result.push(
            // 外围刻度
            {
              type: "gauge",
              center: item.pos,
              radius: "50%", // 1行2个
              splitNumber: item.splitNum || 10,
              min: item.range[0],
              max: item.range[1],
              startAngle: 225,
              endAngle: -45,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 2,
                  shadowBlur: 0,
                  color: [[1, highlight]],
                },
              },
              axisTick: {
                show: true,
                lineStyle: {
                  color: highlight,
                  width: 1,
                },
                length: -5,
                splitNumber: 10,
              },
              splitLine: {
                show: true,
                length: -10,
                lineStyle: {
                  color: highlight,
                },
              },
              axisLabel: {
                distance: -18,
                textStyle: {
                  color: highlight,
                  fontSize: "10",
                },
              },
              pointer: {
                show: 0,
              },
              detail: {
                show: 0,
              },
            },
            {
              name: "速度",
              type: "gauge",
              center: item.pos,
              splitNumber: item.splitNum || 10,
              min: item.range[0],
              max: item.range[1],
              radius: "45%",
              axisLine: {
                // 坐标轴线
                show: false,
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: item.YS,
                  shadowColor: "#ccc",
                  shadowBlur: 25,
                  width: 0,
                },
              },
              axisLabel: {
                show: false,
              },
              axisTick: {
                // 坐标轴小标记
                // show: false,
                length: 10, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  color: "auto",
                  width: 2,
                },
              },
              splitLine: {
                // 分隔线
                show: false,
                length: 20, // 属性length控制线长
                lineStyle: {
                  // 属性lineStyle（详见lineStyle）控制线条样式
                  color: "auto",
                },
              },
              title: {
                textStyle: {
                  // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  fontWeight: "bolder",
                  fontSize: 20,
                  fontStyle: "italic",
                },
              },
              detail: {
                show: true,
                offsetCenter: [0, "100%"],
                textStyle: {
                  fontSize: 14,
                },
                formatter: [
                  "{value} " + (item.unit || ""),
                  "{name|" + item.name + "}",
                ].join("\n"),
                rich: {
                  name: {
                    fontSize: 14,
                    lineHeight: 20,
                    // color: "#fff",
                  },
                },
              },
              data: [
                {
                  value: item.value,
                },
              ],
              pointer: {
                width: 5,
              },
            },
            // 内侧指针、数值显示
            {
              name: item.name,
              type: "gauge",
              center: item.pos,
              radius: "40%",
              startAngle: 225,
              endAngle: -45,
              min: item.range[0],
              max: item.range[1],
              axisLine: {
                show: true,
                lineStyle: {
                  width: 0,
                  color: [[1, "rgba(75,228,255,.1)"]],
                },
              },
              axisTick: {
                show: 0,
              },
              splitLine: {
                show: 0,
              },
              axisLabel: {
                show: 0,
              },
              pointer: {
                show: true,
                length: "90%",
                width: 3,
              },
              itemStyle: {
                //表盘指针的颜色
                color: "rgba(255, 153, 0, 0.31)",
                borderColor: "#ff9900",
                borderWidth: 1,
              },
              detail: {
                show: false,
                offsetCenter: [0, "100%"],
                textStyle: {
                  fontSize: 30,
                  color: "#00eff2",
                },
                formatter: [
                  "{value} " + (item.unit || ""),
                  "{name|" + item.name + "}",
                ].join("\n"),
                rich: {
                  name: {
                    fontSize: 30,
                    lineHeight: 30,
                    color: "#00eff2",
                  },
                },
              },

              data: [
                {
                  value: item.value,
                },
              ],
            }
          );
        });
        return result;
      })(),
    };
    myChart.setOption(option);
  }
}
